क्रॉस-ओरिजिन कम्युनिकेशन: PostMessage API सह सुरक्षा पॅटर्न्स

आधुनिक वेबमध्ये, ॲप्लिकेशन्सना वारंवार वेगवेगळ्या ओरिजिनच्या रिसोर्सेससोबत संवाद साधावा लागतो. सेम-ओरिजिन पॉलिसी (SOP) ही एक महत्त्वाची सुरक्षा यंत्रणा आहे जी स्क्रिप्ट्सना वेगळ्या ओरिजिनमधून रिसोर्सेस ॲक्सेस करण्यापासून प्रतिबंधित करते. तथापि, काही कायदेशीर परिस्थितींमध्ये क्रॉस-ओरिजिन कम्युनिकेशन आवश्यक असते. postMessage API हे साध्य करण्यासाठी एक नियंत्रित यंत्रणा प्रदान करते, परंतु त्याचे संभाव्य सुरक्षा धोके समजून घेणे आणि योग्य सुरक्षा पॅटर्न्स लागू करणे महत्त्वाचे आहे.

सेम-ओरिजिन पॉलिसी (SOP) समजून घेणे

सेम-ओरिजिन पॉलिसी ही वेब ब्राउझर्समधील एक मूलभूत सुरक्षा संकल्पना आहे. ती वेब पेजेसना त्या डोमेनपेक्षा वेगळ्या डोमेनवर रिक्वेस्ट करण्यापासून प्रतिबंधित करते, ज्या डोमेनवरून वेब पेज सर्व्ह केले गेले आहे. ओरिजिन हे स्कीम (प्रोटोकॉल), होस्ट (डोमेन) आणि पोर्टद्वारे परिभाषित केले जाते. यापैकी कोणतेही वेगळे असल्यास, ओरिजिन भिन्न मानले जातात. उदाहरणार्थ:

• https://example.com
• https://www.example.com
• http://example.com
• https://example.com:8080

हे सर्व वेगवेगळे ओरिजिन आहेत आणि SOP त्यांच्या दरम्यान थेट स्क्रिप्ट ॲक्सेस प्रतिबंधित करते.

PostMessage API चा परिचय

postMessage API क्रॉस-ओरिजिन कम्युनिकेशनसाठी एक सुरक्षित आणि नियंत्रित यंत्रणा प्रदान करते. हे स्क्रिप्ट्सना त्यांच्या ओरिजिनची पर्वा न करता इतर विंडोज (उदा. iframes, नवीन विंडोज किंवा टॅब) वर मेसेज पाठवण्याची परवानगी देते. त्यानंतर रिसिव्हिंग विंडो हे मेसेज ऐकून त्यानुसार प्रक्रिया करू शकते.

मेसेज पाठवण्यासाठी मूळ सिंटॅक्स खालीलप्रमाणे आहे:

otherWindow.postMessage(message, targetOrigin);

• otherWindow: टारगेट विंडोचा संदर्भ (उदा. window.parent, iframe.contentWindow, किंवा window.open वरून मिळालेला विंडो ऑब्जेक्ट).
• message: तुम्हाला पाठवायचा असलेला डेटा. हा कोणताही जावास्क्रिप्ट ऑब्जेक्ट असू शकतो जो सीरियलाइज केला जाऊ शकतो (उदा. स्ट्रिंग, नंबर्स, ऑब्जेक्ट्स, ॲरेज).
• targetOrigin: तुम्हाला ज्या ओरिजिनवर मेसेज पाठवायचा आहे तो निर्दिष्ट करतो. हा एक महत्त्वाचा सुरक्षा पॅरामीटर आहे.

मेसेज स्वीकारणाऱ्या बाजूला, तुम्हाला message इव्हेंटसाठी ऐकणे आवश्यक आहे:

window.addEventListener('message', function(event) {
  // ...
});

event ऑब्जेक्टमध्ये खालील गुणधर्म असतात:

• event.data: दुसऱ्या विंडोने पाठवलेला मेसेज.
• event.origin: ज्या विंडोने मेसेज पाठवला आहे त्याचा ओरिजिन.
• event.source: ज्या विंडोने मेसेज पाठवला आहे त्याचा संदर्भ.

सुरक्षा धोके आणि असुरक्षितता

postMessage SOP निर्बंधांना बायपास करण्याचा मार्ग देत असला तरी, काळजीपूर्वक लागू न केल्यास ते संभाव्य सुरक्षा धोके देखील निर्माण करते. येथे काही सामान्य असुरक्षितता आहेत:

१. टार्गेट ओरिजिन जुळत नाही

event.origin प्रॉपर्टी प्रमाणित करण्यात अयशस्वी होणे ही एक गंभीर असुरक्षितता आहे. जर रिसिव्हरने मेसेजवर आंधळेपणाने विश्वास ठेवला, तर कोणतीही वेबसाइट दुर्भावनापूर्ण डेटा पाठवू शकते. मेसेजवर प्रक्रिया करण्यापूर्वी नेहमी event.origin अपेक्षित ओरिजिनशी जुळत असल्याची खात्री करा.

उदाहरण (असुरक्षित कोड):

window.addEventListener('message', function(event) {
  // हे करू नका!
  processMessage(event.data);
});

उदाहरण (सुरक्षित कोड):

window.addEventListener('message', function(event) {
  if (event.origin !== 'https://trusted-origin.com') {
    console.warn('अविश्वसनीय ओरिजिनवरून मेसेज प्राप्त झाला:', event.origin);
    return;
  }

  processMessage(event.data);
});

२. डेटा इंजेक्शन

मिळालेला डेटा (event.data) एक्झिक्युटेबल कोड म्हणून हाताळणे किंवा थेट DOM मध्ये इंजेक्ट केल्यास क्रॉस-साइट स्क्रिप्टिंग (XSS) असुरक्षितता निर्माण होऊ शकते. मिळालेला डेटा वापरण्यापूर्वी नेहमी सॅनिटाइज आणि प्रमाणित करा.

उदाहरण (असुरक्षित कोड):

window.addEventListener('message', function(event) {
  if (event.origin === 'https://trusted-origin.com') {
    document.body.innerHTML = event.data; // हे करू नका!
  }
});

उदाहरण (सुरक्षित कोड):

window.addEventListener('message', function(event) {
  if (event.origin === 'https://trusted-origin.com') {
    const sanitizedData = sanitize(event.data); // एक योग्य सॅनिटायझेशन फंक्शन लागू करा
    document.getElementById('message-container').textContent = sanitizedData;
  }
});

function sanitize(data) {
    // येथे मजबूत सॅनिटायझेशन लॉजिक लागू करा.
    // उदाहरणार्थ, DOMPurify किंवा तत्सम लायब्ररी वापरा
    return DOMPurify.sanitize(data);
}

३. मॅन-इन-द-मिडल (MITM) हल्ले

जर संवाद असुरक्षित चॅनल (HTTP) वर होत असेल, तर MITM हल्लेखोर मेसेज अडवून त्यात बदल करू शकतो. सुरक्षित संवादासाठी नेहमी HTTPS वापरा.

४. क्रॉस-साइट रिक्वेस्ट फोर्जरी (CSRF)

जर रिसिव्हर योग्य प्रमाणीकरणाशिवाय मिळालेल्या मेसेजवर आधारित क्रिया करत असेल, तर हल्लेखोर रिसिव्हरला अनपेक्षित क्रिया करण्यास भाग पाडण्यासाठी बनावट मेसेज तयार करू शकतो. CSRF संरक्षण यंत्रणा लागू करा, जसे की मेसेजमध्ये एक गुप्त टोकन समाविष्ट करणे आणि रिसिव्हरच्या बाजूने ते सत्यापित करणे.

५. targetOrigin मध्ये वाइल्डकार्ड वापरणे

targetOrigin * वर सेट केल्याने कोणत्याही ओरिजिनला मेसेज प्राप्त करण्याची परवानगी मिळते. हे टाळले पाहिजे, जोपर्यंत अत्यंत आवश्यक नसेल, कारण ते ओरिजिन-आधारित सुरक्षेचा उद्देश नष्ट करते. जर तुम्हाला * वापरावेच लागले, तर तुम्ही मेसेज ऑथेंटिकेशन कोड (MACs) सारखे इतर मजबूत सुरक्षा उपाय लागू केल्याची खात्री करा.

उदाहरण (हे टाळा):

otherWindow.postMessage(message, '*'); // '*' वापरणे टाळा, जोपर्यंत अत्यंत आवश्यक नसेल

सुरक्षा पॅटर्न्स आणि सर्वोत्तम पद्धती

postMessage शी संबंधित धोके कमी करण्यासाठी, खालील सुरक्षा पॅटर्न्स आणि सर्वोत्तम पद्धतींचे अनुसरण करा:

१. कठोर ओरिजिन प्रमाणीकरण

रिसिव्हरच्या बाजूने नेहमी event.origin प्रॉपर्टी प्रमाणित करा. त्याची पूर्वनिर्धारित विश्वसनीय ओरिजिनच्या सूचीशी तुलना करा. तुलनेसाठी कठोर समानतेचा (===) वापर करा.

२. डेटा सॅनिटायझेशन आणि प्रमाणीकरण

postMessage द्वारे मिळालेला सर्व डेटा वापरण्यापूर्वी सॅनिटाइज आणि प्रमाणित करा. डेटा कसा वापरला जाईल यावर अवलंबून योग्य सॅनिटायझेशन तंत्र वापरा (उदा. HTML एस्केपिंग, URL एन्कोडिंग, इनपुट व्हॅलिडेशन). HTML सॅनिटाइज करण्यासाठी DOMPurify सारख्या लायब्ररी वापरा.

३. मेसेज ऑथेंटिकेशन कोड (MACs)

मेसेजची अखंडता आणि सत्यता सुनिश्चित करण्यासाठी मेसेजमध्ये मेसेज ऑथेंटिकेशन कोड (MAC) समाविष्ट करा. पाठवणारा शेअर केलेल्या गुप्त कीचा वापर करून MAC कॅल्क्युलेट करतो आणि तो मेसेजमध्ये समाविष्ट करतो. रिसिव्हर त्याच शेअर केलेल्या गुप्त कीचा वापर करून MAC पुन्हा कॅल्क्युलेट करतो आणि मिळालेल्या MAC शी त्याची तुलना करतो. जर ते जुळले, तर मेसेज खरा आणि अबाधित मानला जातो.

उदाहरण (HMAC-SHA256 वापरून):

// पाठवणारा
async function sendMessage(message, targetOrigin, sharedSecret) {
  const encoder = new TextEncoder();
  const data = encoder.encode(JSON.stringify(message));
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(sharedSecret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["sign"]
  );
  const signature = await crypto.subtle.sign("HMAC", key, data);
  const signatureArray = Array.from(new Uint8Array(signature));
  const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');

  const securedMessage = {
    data: message,
    signature: signatureHex
  };

  otherWindow.postMessage(securedMessage, targetOrigin);
}

// स्वीकारणारा
async function receiveMessage(event, sharedSecret) {
  if (event.origin !== 'https://trusted-origin.com') {
    console.warn('अविश्वसनीय ओरिजिनवरून मेसेज प्राप्त झाला:', event.origin);
    return;
  }

  const securedMessage = event.data;
  const message = securedMessage.data;
  const receivedSignature = securedMessage.signature;

  const encoder = new TextEncoder();
  const data = encoder.encode(JSON.stringify(message));
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(sharedSecret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["verify"]
  );
  const signature = await crypto.subtle.sign("HMAC", key, data);
  const signatureArray = Array.from(new Uint8Array(signature));
  const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');

  if (signatureHex === receivedSignature) {
    console.log('मेसेज खरा आहे!');
    processMessage(message); // मेसेजवर प्रक्रिया करण्यास पुढे जा
  } else {
    console.error('मेसेज सिग्नेचर व्हेरिफिकेशन अयशस्वी झाले!');
  }
}

महत्वाचे: शेअर केलेली गुप्त की सुरक्षितपणे तयार आणि संग्रहित केली पाहिजे. कोडमध्ये की हार्डकोड करणे टाळा.

४. नॉन्स (Nonce) आणि टाइमस्टॅम्प वापरणे

रिप्ले हल्ले टाळण्यासाठी, मेसेजमध्ये एक युनिक नॉन्स (एकदा वापरला जाणारा नंबर) आणि टाइमस्टॅम्प समाविष्ट करा. रिसिव्हर नंतर सत्यापित करू शकतो की नॉन्स यापूर्वी वापरला गेला नाही आणि टाइमस्टॅम्प स्वीकार्य कालावधीच्या आत आहे. हे हल्लेखोराला पूर्वी अडवलेले मेसेज पुन्हा पाठवण्याचा धोका कमी करते.

५. किमान विशेषाधिकाराचे तत्व

दुसऱ्या विंडोला फक्त किमान आवश्यक विशेषाधिकार द्या. उदाहरणार्थ, जर दुसऱ्या विंडोला फक्त डेटा वाचण्याची आवश्यकता असेल, तर त्याला डेटा लिहिण्याची परवानगी देऊ नका. तुमची कम्युनिकेशन प्रोटोकॉल किमान विशेषाधिकाराचे तत्व लक्षात घेऊन डिझाइन करा.

६. कंटेंट सिक्युरिटी पॉलिसी (CSP)

कंटेंट सिक्युरिटी पॉलिसी (CSP) चा वापर करा जेणेकरून स्क्रिप्ट्स कोणत्या स्त्रोतांकडून लोड केल्या जाऊ शकतात आणि स्क्रिप्ट्स कोणत्या क्रिया करू शकतात यावर निर्बंध घालता येतील. हे postMessage डेटाच्या अयोग्य हाताळणीमुळे उद्भवू शकणाऱ्या XSS असुरक्षिततेचा प्रभाव कमी करण्यास मदत करू शकते.

७. इनपुट प्रमाणीकरण

मिळालेल्या डेटाची रचना आणि स्वरूप नेहमी प्रमाणित करा. एक स्पष्ट मेसेज स्वरूप परिभाषित करा आणि मिळालेला डेटा या स्वरूपाशी सुसंगत असल्याची खात्री करा. हे अनपेक्षित वर्तन आणि असुरक्षितता टाळण्यास मदत करते.

८. सुरक्षित डेटा सीरियलायझेशन

मेसेज सीरियलाइज आणि डीसीरियलाइज करण्यासाठी JSON सारखे सुरक्षित डेटा सीरियलायझेशन स्वरूप वापरा. eval() किंवा Function() सारखे कोड एक्झिक्यूशनला परवानगी देणारे स्वरूप वापरणे टाळा.

९. मेसेजचा आकार मर्यादित करा

postMessage द्वारे पाठवलेल्या मेसेजचा आकार मर्यादित करा. मोठे मेसेज जास्त संसाधने वापरू शकतात आणि संभाव्यतः डिनायल-ऑफ-सर्व्हिस हल्ल्यांना कारणीभूत ठरू शकतात.

१०. नियमित सुरक्षा ऑडिट

संभाव्य असुरक्षितता ओळखण्यासाठी आणि त्यांचे निराकरण करण्यासाठी आपल्या कोडचे नियमित सुरक्षा ऑडिट करा. postMessage च्या अंमलबजावणीकडे विशेष लक्ष द्या आणि सर्व सुरक्षा सर्वोत्तम पद्धतींचे पालन केले जात असल्याची खात्री करा.

उदाहरण परिस्थिती: Iframe आणि त्याच्या पॅरेंटमधील सुरक्षित संवाद

अशा परिस्थितीचा विचार करा जिथे https://iframe.example.com वर होस्ट केलेला iframe त्याच्या https://parent.example.com वर होस्ट केलेल्या पॅरेंट पेजशी संवाद साधू इच्छितो. iframe ला प्रक्रिया करण्यासाठी वापरकर्ता डेटा पॅरेंट पेजवर पाठवायचा आहे.

Iframe (https://iframe.example.com):

// एक शेअर केलेली गुप्त की तयार करा (एका सुरक्षित की निर्मिती पद्धतीसह बदला)
const sharedSecret = 'YOUR_SECURE_SHARED_SECRET';

// वापरकर्ता डेटा मिळवा
const userData = {
  name: 'John Doe',
  email: 'john.doe@example.com'
};

// वापरकर्ता डेटा पॅरेंट पेजवर पाठवा
async function sendUserData(userData) {
  const encoder = new TextEncoder();
  const data = encoder.encode(JSON.stringify(userData));
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(sharedSecret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["sign"]
  );
  const signature = await crypto.subtle.sign("HMAC", key, data);
  const signatureArray = Array.from(new Uint8Array(signature));
  const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');

  const securedMessage = {
    data: userData,
    signature: signatureHex
  };
  parent.postMessage(securedMessage, 'https://parent.example.com');
}

sendUserData(userData);

पॅरेंट पेज (https://parent.example.com):

// शेअर केलेली गुप्त की (iframe च्या की शी जुळली पाहिजे)
const sharedSecret = 'YOUR_SECURE_SHARED_SECRET';

window.addEventListener('message', async function(event) {
  if (event.origin !== 'https://iframe.example.com') {
    console.warn('अविश्वसनीय ओरिजिनवरून मेसेज प्राप्त झाला:', event.origin);
    return;
  }

  const securedMessage = event.data;
  const userData = securedMessage.data;
  const receivedSignature = securedMessage.signature;

  const encoder = new TextEncoder();
  const data = encoder.encode(JSON.stringify(userData));
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(sharedSecret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["verify"]
  );
  const signature = await crypto.subtle.sign("HMAC", key, data);
  const signatureArray = Array.from(new Uint8Array(signature));
  const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');


  if (signatureHex === receivedSignature) {
    console.log('मेसेज खरा आहे!');
    // वापरकर्ता डेटावर प्रक्रिया करा
    console.log('वापरकर्ता डेटा:', userData);
  } else {
    console.error('मेसेज सिग्नेचर व्हेरिफिकेशन अयशस्वी झाले!');
  }
});

महत्वाच्या सूचना:

• YOUR_SECURE_SHARED_SECRET ला सुरक्षितपणे तयार केलेल्या शेअर केलेल्या गुप्त कीने बदला.
• शेअर केलेली गुप्त की iframe आणि पॅरेंट पेज दोन्हीमध्ये समान असणे आवश्यक आहे.
• हे उदाहरण मेसेज ऑथेंटिकेशनसाठी HMAC-SHA256 वापरते.

निष्कर्ष

postMessage API वेब ॲप्लिकेशन्समध्ये क्रॉस-ओरिजिन कम्युनिकेशन सक्षम करण्यासाठी एक शक्तिशाली साधन आहे. तथापि, संभाव्य सुरक्षा धोके समजून घेणे आणि हे धोके कमी करण्यासाठी योग्य सुरक्षा पॅटर्न्स लागू करणे महत्त्वाचे आहे. या मार्गदर्शिकेत वर्णन केलेल्या सुरक्षा पॅटर्न्स आणि सर्वोत्तम पद्धतींचे पालन करून, आपण मजबूत आणि सुरक्षित वेब ॲप्लिकेशन्स तयार करण्यासाठी postMessage चा सुरक्षितपणे वापर करू शकता.

नेहमी सुरक्षेला प्राधान्य देण्याचे लक्षात ठेवा आणि वेब डेव्हलपमेंटसाठी नवीनतम सुरक्षा सर्वोत्तम पद्धतींसह अद्ययावत रहा. तुमची ॲप्लिकेशन्स संभाव्य असुरक्षिततेपासून संरक्षित आहेत याची खात्री करण्यासाठी नियमितपणे तुमच्या कोड आणि सुरक्षा कॉन्फिगरेशनचे पुनरावलोकन करा.